<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>团课预约</title>
    <link rel="stylesheet" href="css/flexible.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/vant.css">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script src="js/kcDetailsShare.js"></script>
    <script src="js/flexible.js"></script>
    <script src="js/vue/vue.js"></script>
    <script src="js/vue/axios.js"></script>
    <script src="js/vue/MD5.js"></script>
    <script src="js/vue/vant.js"></script>
    <script src="js/vue/qs.js"></script>
    
    <style type="text/css">
        #mess_share img {
            width: 22px;
            height: 22px;
        }

        #cover {
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 18888;
            background-color: #000000;
            opacity: 0.7;
        }

        #guide {
            display: none;
            position: absolute;
            right: 8px;
            top: 5px;
            z-index: 19999;
        }

        #guide img {
            width: 260px;
            height: 180px;
        }
    </style>
    <script type="text/javascript">
        var _system = {
            $: function (id) {
                return document.getElementById(id);
            },
            _client: function () {
                return {
                    w: document.documentElement.scrollWidth,
                    h: document.documentElement.scrollHeight,
                    bw: document.documentElement.clientWidth,
                    bh: document.documentElement.clientHeight
                };
            },
            _scroll: function () {
                return {
                    x: document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft,
                    y: document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop
                };
            },
            _cover: function (show) {
                if (show) {
                    this.$("cover").style.display = "block";
                    this.$("cover").style.width = (this._client().bw > this._client().w ? this._client().bw : this._client().w) + "px";
                    this.$("cover").style.height = (this._client().bh > this._client().h ? this._client().bh : this._client().h) + "px";
                } else {
                    this.$("cover").style.display = "none";
                }
            },
            _guide: function (click) {
                this._cover(true);
                this.$("guide").style.display = "block";
                this.$("guide").style.top = (_system._scroll().y + 5) + "px";
                window.onresize = function () {
                    _system._cover(true);
                    _system.$("guide").style.top = (_system._scroll().y + 5) + "px";
                };
                if (click) {
                    _system.$("cover").onclick = function () {
                        _system._cover();
                        _system.$("guide").style.display = "none";
                        _system.$("cover").onclick = null;
                        window.onresize = null;
                    };
                }
            },
            _zero: function (n) {
                return n < 0 ? 0 : n;
            }
        }
    </script>
</head>
<body>
<div id="app">
    <div id="cover"></div>
    <div id="guide">
        <img src="images/guide1.png">
    </div>
    <div class="fx_head">
        <div class="tx">
            <img :src="kc_info.Picurl" onerror="this.src='images/tx.png'" alt="">
        </div>
        <template>
            <div class="content">
                <div class="title fl">{{kc_info.Title}}</div>
                <div class="name fl">{{kc_info.Sname}}</div>
                <div class="clear h10"></div>
                <div class="address fl" style="background-color: white;">{{kc_info.Space_name}}</div>
                <div class="time fl">{{kc_info.SEtime}}</div>
                <div class="clear h10"></div>
                <div class="yy fl">预约 {{kc_info.yy_num}}/{{kc_info.Max}}</div>
                <div class="num fl">预约满{{kc_info.Min}}人开课</div>
            </div>
        </template>
        <div class="clear h10"></div>
        <div class="clear h10"></div>
        <!-- <div class="fxbtn" onclick="_system._guide(true)">推荐给好朋友</div> -->
    </div>
    <div class="h10 mg"></div>

    <div class="fx_xx">
        <ul>
            <li v-for="(item,index) in typeKc" :class="{'xx_check':isShowPj==index}"  @click="kcpj(index)">{{item.name}}</li>
        </ul>
    </div>
    <div class="fx_main">

        <!--课程简介的-->
        <div class="kc_jianjie" v-if="isShowPj=='0'">
            <div v-if="kc_info.Info!=''" class="main_content" >
              {{kc_info.Info}}
            </div>
			 <div v-else class="main_content_none">
                <img src="images/zwjs.png" alt="暂无介绍" style="width: 1rem">
             </div> 
        </div>
        <!--课程评价的-->
        <div class="kc_pingjia" v-if="isShowPj=='1'">
			<div v-if="pingjia.length>0">
				<div  class="list" v-for="itemdl in pingjia" :key="itemdl.Currid">
					<div>
						<span class="name">{{itemdl.Username}}</span>
						<span class="date">{{itemdl.Addtime}}</span>
					</div>
					<div class="zt">
						<div class="pf">
							<span style="display: inline-block;font-size: 0.12rem;" class="titie">总体评分</span>
							<span style="margin-left:0.1rem;">
								<van-rate :size="15" v-model="itemdl.Score" readonly color="#ee0a24"/>
							</span>
						<span v-if="itemdl.Score=='2'" class="pingjia" style="color: red">不好</span>
						<span v-if="itemdl.Score=='3'" class="pingjia" style="color: red">一般</span>
						<span v-if="itemdl.Score=='5'" class="pingjia" style="color: red">很好</span>
						</div>
						<div class="pf">
							<span class="title">上课时间</span>
							<span>
								<van-rate :size="15" v-model="itemdl.Classtime" readonly color="#ee0a24"/>
							</span>
							<span v-if="itemdl.Classtime=='2'" class="pingjia" style="color: red">迟到好久</span>
							<span v-if="itemdl.Classtime=='3'" class="pingjia" style="color: red">迟到一会</span>
							<span v-if="itemdl.Classtime=='5'" class="pingjia" style="color: red">准时</span>
						</div>

						<div class="pf">
							<span class="title">上课内容</span>
							<span>
								<van-rate :size="15" v-model="itemdl.Contents" readonly color="#ee0a24"/>
							</span>
							<span v-if="itemdl.Contents=='2'" class="pingjia" style="color: red">乏味</span>
							<span v-if="itemdl.Contents=='3'" class="pingjia" style="color: red">一般</span>
							<span v-if="itemdl.Contents=='5'" class="pingjia" style="color: red">丰富</span>
						</div>
						<div class="pf">
							<span class="title">上课态度</span>
							<span>
								<van-rate :size="15" v-model="itemdl.Manner" readonly color="#ee0a24"/>
							</span>
							<span v-if="itemdl.Manner=='2'" class="pingjia" style="color: red">恶劣</span>
							<span v-if="itemdl.Manner=='3'" class="pingjia" style="color: red">一般</span>
							<span v-if="itemdl.Manner=='5'" class="pingjia" style="color: red">很好</span>
						</div>
						<div class="clear"></div>
					</div>
					<div class="content">{{itemdl.Desc}}</div>
				</div>
            </div>
			<div v-else class="main_content_none">
                <img src="images/zwpj.png" alt="暂无介绍" style="width: 1rem">
            </div>
        </div>
    </div>
    <div v-show="isLogo">
        <div class="fx_main">
                <div class="fx_ts">以下会员卡都可以上此课程哦~ 欢迎购买</div>
                <div class="fx_card_list">
                    <div class="fx_card" v-for="item in wdl_card_list">
                        <div class="icon">
                            <img v-if="item.Cardtype=='30'" src="images/card30.png" alt="">
                            <img v-else-if="item.Cardtype=='20'" src="images/card20.png" alt="">
                            <img v-else src="images/card10.png" alt="">
                        </div>
                        <div class="content">
                            <div class="title">{{item.Cardname}}</div>
                            <div><span class="l">巨惠价</span><span class="r">￥{{item.Charge}}</span></div>
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>
        </div>
        <div class="yy_down">
            <div class="yy_btn" @click="logo">请先登录后预约</div>
        </div>
    </div>
    <!--会员卡列表-->
    <div class="h10 mg" v-if="IsFormality != 1&&finish=='0'"></div>
    <div class="yy_card_list" v-show="!isLogo" v-if="IsFormality != 1&&finish=='0'">
        <div class="title">会员卡</div>
        <div class="card" v-for="(item,index) in card_list">
            <div class="icon"><img src="images/card.png" alt="会员卡"></div>
            <div class="content">
                <div>
                    <div class="card_name">{{item.Cardname}}</div>
                    <div class="ye" v-if="item.Surplus=='已到期'">{{item.Surplus}}</div>
                    <div class="ye" v-else-if="item.Cardtype=='10'">剩余{{item.Surplus}}天</div>
                    <div class="ye" v-else-if="item.Cardtype=='20'">剩余{{item.Surplus}}次</div>
                    <div class="ye" v-else-if="item.Cardtype=='70'">剩余{{item.Surplus}}分钟</div>
                    <div class="ye" v-else>剩余{{item.Surplus}}元</div>
                    <div class="clear"></div>
                </div>
                <div class="card_time">{{item.time}}</div>
            <div v-if="item.is_yy=='0'">
                    <div @click="selected(index,item.id,item.Csid)" v-if="currIndex==index">
                        <div class="jf">{{item.account}}</div>
                        <div class="xz"><img src="images/xz.png"></div>
                    </div>
                    <div @click="selected(index,item.id,item.Csid)" v-else>
                            <div class="jf">{{item.account}}</div>
                            <div class="xz"><img src="images/wxz.png"></div>
                    </div>
            </div>
            <div v-else>
                    <div>
                        <div class="jf">{{item.account}}</div>
                        <!-- <div class="xz"><img src="images/xz.png"></div> -->
                    </div>
            </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>

    <div class="yy_down" v-show="!isLogo" v-if="IsFormality != 1&&finish=='0'">
	    <div class="yy_btn" @click="order">预约</div>
	</div>
    <div style="display: none;">
        <input ref="desc" id="desc"/>
        <input ref="descTitle" id="descTitle"/>
        <input ref="descImg" id="descImg"/>
    </div>
</div>
</body>
<script>
new Vue({
    el: '#app',
    data: {
        isLogo:false,
        kc_info:{
            Title: "",
            Picurl: "",
            Max: "",
            Min: "",
            Info: "",
            yy_num: '',
            SEtime: "",
            Sname: "",
            Space_name: ""
        },
        card_list:[],
        from:{
            date:'',
            currid:'',
            key:'',
            plan_id:'',
            stime:'',
            etime:'',
            cid:'',
            csid:''
        },
        currIndex:'0',
        wdl_card_list:[],
        vid:'',
        share:'',
        isShowPj:'0',
        pingjia:[],
        typeKc:[
            {"name":"课程简介"},
            {"name":"课程评价"}
        ],
		finish:'0'
    },
    created(){
        this.setCanS()
    },
    methods:{
         //设置参数
         setCanS(){
            let Request = new Object()
            Request = GetRequest()
            this.from.currid = Request['currid']
            this.from.key = Request['key']
            this.from.date = Request['date']
            this.from.plan_id = Request['plan_id']
            this.vid = Request['vid']
            this.share =Request['share']
			this.IsFormality =Request['IsFormality']
			this.finish=Request['finish']
			if(this.finish!='null'&&this.finish!=undefined&&this.finish!=''){
			}else{
				this.finish='0'
			}
            if(this.share=="share"){
                sessionStorage.setItem('logo',"0")
                sessionStorage.setItem('vid',this.vid)
                this.getToken()
            }else{
                this.getlists()
                this.kcShare()
                
            }
            
        },
        getlists(){
            window.vant.Toast.loading({
                mask: true,
                message: '加载中...'
                });
            const params={
                date:this.from.date,
                key:this.from.key,
                currid:this.from.currid,
                plan_id:this.from.plan_id
            }
            //console.log(params)
            getVs()
            axios.get('/mobileapi/member/curriculum_t.php?act=tk_yy_list',
            {params:params}).then(data =>{
                console.log(data.data)
                let { msg, code,user} = data.data
                    if (code !== 200) {
                        _this.$message({
                            message: msg,
                            type: 'error'
                        });
                    } else {
                        window.vant.Toast.clear();
                        data=data.data
                        //判断是否登录
                        if(data.data.logn_type=='1'){
                            this.isLogo=false
                        }else{
                            this.isLogo=true
                        }
                        if(data.data.card_list==null){
                            data.data.card_list=[]
                        }
                        this.card_list=data.data.card_list
                        this.kc_info=data.data.kc_info
                        this.from.stime=this.kc_info.Stime
                        this.from.etime=this.kc_info.Etime
                        if(this.card_list.length>0){
                            this.from.cid=this.card_list[0].id
                            this.from.csid=this.card_list[0].Csid
                        }
                        this.wdl_card_list=data.data.wdl_card_list
                        this.kcPingjia()
                    }
                }).catch(function (error) {
                    console.log(error); 
            })
        },
        //选择日期
        selectDate(time){
            this.date=time
            this.getlists()
        },
        selected(index,id,csid){
            console.log(index)
            this.currIndex=index
            this.from.cid=id
            this.from.csid=csid
        },
        //预约
        order(){
            let from=JSON.stringify(this.from)
            let sign=md5(from)
            const params={
                from:from,
                sign:sign
            }
            getVs()
            axios.post('/mobileapi/member/curriculum_t.php?act=tk_yy',Qs.stringify(params)).then(data =>{
                console.log(data.data)
                let { msg, code,user} = data.data
                    if (code !== 200) {
                        window.vant.Toast.fail(msg)
                    } else {
                        window.vant.Toast.success('预约成功')
                        this.timer = setTimeout(this.list, 2000);
                    }
                }).catch(function (error) {
                    console.log(error); 
            })
        },
        list(){
            window.location.href="curriculum_t.html"
        },
        //没有登录跳转到登录页
        logo(){
            //获取当前页面的logons等于1是未登录
            let logons='1'
            window.location.href='login.html?islogos='+logons+'&vid='
        },
        //课程分享内容
        kcShare(){
            const params={
                plan_id:this.from.plan_id
            }
            getVs()
            axios.get('/mobileapi/member/wxfx.php?act=get_kc_fx',
            {params:params}).then(data =>{
                console.log(data.data)
                let { msg, code,user} = data.data
                    if (code !== 200) {
                        
                    } else {
                        data=data.data
                        this.$refs.desc.value=data.data.desc
                        this.$refs.descTitle.value=data.data.title
                        this.$refs.descImg.value=data.data.picurl
                    }
                }).catch(function (error) {
                    console.log(error); 
            })
        },
        //课程评价内容
         kcPingjia(){
            const params={
                currid:this.from.plan_id,
                ctime:this.from.stime,
                cdate:this.from.date
            }
            getVs()
            axios.get('/mobileapi/member/curriculum.php?act=info',
            {params:params}).then(data =>{
                console.log(data.data)
                let { msg, code,user} = data.data
                    if (code != 200) {
                        
                    } else {
                        data=data.data
                        this.pingjia=data.data
                    }
                }).catch(function (error) {
                    console.log(error); 
            })
        },
        //获取分享的token
        getToken(){
            const params={
                vid:sessionStorage.getItem('vid')
            }
            sessionStorage.setItem('logo','0')
            axios.get('/mobileapi/token.php?act=gettoken',{params:params}).then(data =>{
                console.log(data)
                let { msg, code,user} = data.data
                    if (code !== 200) {
                        window.vant.Toast.fail(msg)
                    } else {
                        sessionStorage.setItem('token',data.data.Gtoken)
                        this.getlists()
                        this.kcPingjia()
                        this.kcShare()
                    }
                }).catch(function (error) { 
                    console.log(error); 
            });
        },
        kcpj(type){
            this.isShowPj=type
			this.isShowPj=type
			if(this.isShowPj=='1'){
			
				this.kcPingjia()
			}
        }
    }
})    
</script>
</html>